window.addEventListener('load', function () {
    var mainimg = this.document.querySelector('.main-img')
    var bg = mainimg.querySelector('.bg')
    var bigtu = mainimg.querySelector('.bigtu')
    mainimg.addEventListener('mouseleave', function () {
        bg.style.display = 'none'
        bigtu.style.display = 'none'
    })
    mainimg.addEventListener('mousemove', function (e) {
        bg.style.display = 'block'
        bigtu.style.display = 'block'
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop
        var bgx = x - bg.offsetWidth / 2
        var bgy = y - bg.offsetHeight / 2
        var bgmax = mainimg.offsetWidth - bg.offsetWidth
        if (bgx >= bgmax) {
            bgx = bgmax
        } else if (bgx <= 0) {
            bgx = 0
        }
        if (bgy >= bgmax) {
            bgy = bgmax
        }else if (bgy <= 0) {
            bgy = 0
        }
        bg.style.top = bgy + 'px'
        bg.style.left = bgx + 'px'
        // 大图片移动
        var bigimg = bigtu.querySelector('img')
        var bigmax = bigimg.offsetWidth - bigtu.offsetWidth
        var bigx = bgx * bigmax / bgmax
        var bigy = bgy * bigmax / bgmax
        bigimg.style.left = -bigx + 'px'
        bigimg.style.top = -bigy + 'px'
    })
})